<template>
  <CardBox :noGap="false" type="intention" @clickButton="clickButton">
    <div class="job-intention" v-if="intentionData">
      <div class="grid-box">
        <div class="row">
          <div class="label" v-if="lang == 'cn'">期望薪资:</div>
          <div class="label" v-if="lang == 'en'">Expected Salary:</div>
          <div class="value" v-if="intentionData?.salary_expectation">
            {{ intentionData?.salary_expectation }}
            <template v-if="lang == 'cn'">元/月</template>
            <template v-if="lang == 'en'">$/month</template>
          </div>
        </div>
        <div class="row">
          <div class="label" v-if="lang == 'cn'">联系地址:</div>
          <div class="label" v-if="lang == 'en'">Contact Address:</div>
          <div class="value">{{ intentionData?.address }}</div>
        </div>
        <div class="row">
          <div class="label" v-if="lang == 'cn'">职能职位:</div>
          <div class="label" v-if="lang == 'en'">Functional Position:</div>
          <div class="value">{{ intentionData?.position_name }}</div>
        </div>
        <div class="row">
          <div class="label" v-if="lang == 'cn'">出生年月:</div>
          <div class="label" v-if="lang == 'en'">Date of Birth:</div>
          <div class="value">{{ intentionData?.birthday }}</div>
        </div>
        <div class="row objective">
          <div class="label" v-if="lang == 'cn'">自我评价:</div>
          <div class="label" v-if="lang == 'en'">Self-evaluation:</div>
          <div class="value raw-html" v-if="intentionData?.objective">
            <div class="ql-editor" v-html="intentionData?.objective"></div>
          </div>
        </div>
        <div class="footer_mobile_btns">
          <div class="btn edit" @click="clickButton">
            <template v-if="lang == 'cn'">修改</template>
            <template v-if="lang == 'en'">edit</template>
          </div>
        </div>
      </div>
    </div>
  </CardBox>

  <!-- 弹窗 -->
  <FormModalUpdateIntention
    ref="FormModalUpdateIntentionRef"
    :data="UpdateIntentionData"
    @complete="updateInfo"
  ></FormModalUpdateIntention>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, nextTick, inject, watch } from "vue";
import { postMemberIntention } from "../../../../../api/profile";
import { useMemberStore } from "../../../../../store";
import type { IntentionItem } from "../../../../../types/profile";
const CardBox = defineAsyncComponent(() => import("./common/CardBox.vue"));
const memberStore = useMemberStore();

let lang = inject("lang");
const intentionData = ref<IntentionItem | undefined>();

const data = ref<any>({
  en: undefined,
  cn: undefined,
});
// 获取个人意向数据
const getIntentionData = async () => {
  let res_cn = await postMemberIntention("cn");
  let res_en = await postMemberIntention("en");
  data.value.en = res_en.data;
  data.value.cn = res_cn.data;
  intentionData.value = data.value[lang.value];
};
getIntentionData();
const updateInfo = () => {
  getIntentionData();
};
watch(lang, () => {
  intentionData.value = data.value[lang.value];
});

// 点击 立即修改 按钮
const UpdateIntentionData = ref();
const FormModalUpdateIntentionRef = ref();
const clickButton = () => {
  UpdateIntentionData.value = JSON.parse(JSON.stringify(intentionData.value));
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(UpdateIntentionData.value));
    goto("/mobile/updateIntention");
    sessionStorage.setItem("m_lang", lang.value);
    return;
  }
  nextTick(() => {
    FormModalUpdateIntentionRef.value.show();
  });
};
</script>
<style scoped lang="less">
.job-intention {
  font-size: 14px;
  color: #36434d;
  .grid-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    .row {
      display: flex;
      gap: 48px;
      .label {
        white-space: nowrap;
      }
      .value {
        word-break: break-all;
      }
    }
    .row:nth-child(5) {
      grid-column: 1 / span 2;
    }
    .row.objective {
      max-height: 600px;
      .value {
        flex: 1;
      }
    }
  }
}
.footer_mobile_btns {
  display: none;
}

@media screen and (max-width: 768px) {
  .job-intention {
    font-size: 72px;
    .grid-box {
      grid-template-columns: repeat(1, 1fr);
      row-gap: 82px;
      .row {
        flex-direction: column;
        gap: 41px;
        .value {
          color: #70818c;
        }
      }
      .row:nth-child(5) {
        grid-column: 1 / span 1;
      }
      .row:nth-child(6) {
        grid-column: 1 / span 1;
      }
      .row.objective {
        max-height: 80vh;
      }
    }
    .footer_mobile_btns {
      display: block;
      .btn {
        border-radius: 31px 31px 31px 31px;
        border: 3px solid #ccd6de;
        font-size: 61px;
        color: #36434d;
      }
    }
  }
}
</style>
